<script lang='ts' setup name='Father'>  
 import { ref } from 'vue' 

 import  Child  from './Child.vue';
 const show = ref(true)
 const money = ref(1000)

function toggle(){
    show.value = !show.value
}


const user = ref({
    username:'admin',
    password:'123456',
    address:'黑龙江'
})



</script>  
  
<template>  

<div class="fatherComponent">
       <h3>我是父元素,演示 props</h3>

        <button @click="toggle()">控制显示隐藏子组件</button>
        <div v-if="show">
            <Child  car="奔驰" :toggle="toggle"  :money="money" :username="user.username"  :password="user.password" :address="user.address"></Child>

            <Child  car="奔驰" :toggle="toggle"  :money="money"  v-bind="user"></Child>

        </div>


   </div>

  
</template>  
  
<style scoped>  

</style>  